<template>
  <div class="bottomBox">
    <section class="leftBox">
      <ul class="ulBox">
        <h2>自有设备统计</h2>
        <li style="margin-bottom: .4rem;">
          <category>
            <template #img> <img src="../../assets/images/液体.png" alt="" /></template>
            <template #category>司机</template>
            <template #num>
              <CountTo :endVal="appUserCount" class="num" :duration="4000" separator=","></CountTo>
            </template>
          </category>
        </li>
        <li>
          <category>
            <template #img> <img src="../../assets/images/医疗服务.png" alt="" /></template>
            <template #category>车辆</template>
            <template #num>
              <CountTo :endVal="carInfoCount" class="num" :duration="4000" separator=","></CountTo>
            </template>
          </category>
        </li>
      </ul>
    </section>

    <section class="centerBox">
      <div ref="chart" class="chart" />
    </section>
    <section class="rightBox">
      <ul class="ulBox">
        <li style="margin-bottom: .4rem;">
          <category>
            <template #img> <img src="../../assets/images/文件.png" alt="" /></template>
            <template #category>运单</template>
            <template #num>
              <CountTo :endVal="waybillCount" class="num" :duration="4000" separator=","></CountTo>
            </template>
          </category>
        </li>
        <li>
          <category>
            <template #img> <img src="../../assets/images/其他.png" alt="" /></template>
            <template #category>总吨位</template>
            <template #num>
              <CountTo :endVal="weightSum" class="num" :duration="4000" separator=","></CountTo>
            </template>
          </category>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { CountTo } from 'vue3-count-to';
import category from './category.vue';
import { baseInfoCount, waybillChartByMonth } from '@/common/api';
import moment from 'moment';
import { fontSize } from '@/common/fontSize';
export default {
  name: '',
  components: { category, CountTo },
  props: ['list'],
  data() {
    return {
      statusChart: "",
      YMD: '',
      appUserCount: 0,
      carInfoCount: 0,
      waybillCount: 0,
      weightSum: 0,
      SUM: null,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.YMD = moment().format('YYYY-M-D');
  },
  mounted() {
    baseInfoCount().then((res) => {
      this.appUserCount = res.data.appUserCount
      this.carInfoCount = res.data.carInfoCount
      this.waybillCount = res.data.waybillCount
      this.weightSum = res.data.weightSum
    });

    this.initChart()
  },
  methods: {
    initChart() {
      let label = [];
      let num = [];
      let total = [];
      waybillChartByMonth().then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          label.push(res.data[i].label);
          num.push(res.data[i].num);
          total.push(res.data[i].total);
        }
        this.statusChart = echarts.init(this.$refs.chart);
        let option = {
          xAxis: {
            data: label,
            boundaryGap: false,
            axisTick: {
              show: false
            },
          },
          yAxis: [{
            name: '趟数',
            axisTick: {
              show: false
            }
          }, {
            name: '推送次数'
          }],
          title: {
            text: "运输趟次曲线",
            textStyle: {
              color: "#fff",
              fontWeight: 'normal',
              fontSize: fontSize(.14)
            }
          },
          legend: {
            data: ['趟数', '推送次数']
          },
          grid: {
            left: fontSize(.15),
            right: fontSize(.15),
            bottom: 0,
            top: fontSize(.5),
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [fontSize(.05), fontSize(.1)]
          },
          series: [{
            name: '趟数',
            itemStyle: {
              normal: {
                lineStyle: {
                  width: fontSize(.02)
                }
              }
            },
            smooth: true,
            type: 'line',
            data: num,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          },
          {
            name: '推送次数',
            smooth: true,
            type: 'bar',
            yAxisIndex: 1,

            data: total,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
        };
        this.statusChart.setOption(option);
      })


    },
  },
};
</script>
<style scoped>
.bottomBox {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0 auto;

  .leftBox,
  .rightBox {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .ulBox {

      list-style: none;
      width: 2.5rem;
      height: 80%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;

      h2 {
        margin-bottom: 10px;
        width: 100%;
        text-align: left;
        font-size: .2571rem;
      }
    }
  }

  .centerBox {
    flex: 10;
    font-size: 0.5625rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: .1rem;

    span {
      font-size: .1429rem;
      text-align: left;
      margin-left: .4286rem;
    }
  }
}

.chart {
  width: 100%;
  height: 100%;
}
</style>